<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人月度统计分析</title>
  <style>
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f9fa;
      margin: 0;
      padding: 20px;
    }
    .chart-container {
      max-width: 1000px;
      margin: 30px auto;
      background: white;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
      padding: 30px;
    }
    .chart-header {
      text-align: center;
      margin-bottom: 30px;
    }
    .chart-header h2 {
      color: #2c3e50;
      font-weight: 300;
      font-size: 28px;
      margin-bottom: 10px;
    }
    .chart-header p {
      color: #7f8c8d;
      font-size: 16px;
    }
    #chart {
      width: 100%;
      height: 500px;
    }
    .stats-container {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
      flex-wrap: wrap;
    }
    .stat-card {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      min-width: 200px;
      margin: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      text-align: center;
    }
    .stat-value {
      font-size: 28px;
      font-weight: 300;
      color: #2c3e50;
      margin: 10px 0;
    }
    .stat-label {
      color: #7f8c8d;
      font-size: 14px;
    }
    .stat-trend {
      font-size: 14px;
      margin-top: 5px;
    }
    .trend-up {
      color: #59a14f;
    }
    .trend-down {
      color: #e15759;
    }
    @media (max-width: 768px) {
      .chart-container {
        padding: 15px;
      }
      .stat-card {
        min-width: 120px;
        padding: 15px;
      }
      .stat-value {
        font-size: 22px;
      }
    }
  </style>
</head>
<body>

<div class="chart-container">
  <div class="chart-header">
    <h2>联系人月度增长分析</h2>
    <p>近12个月联系人新增趋势与统计</p>
  </div>

  <div id="chart"></div>

  <div class="stats-container">
    <div class="stat-card">
      <div class="stat-label">总新增联系人</div>
      <div class="stat-value" id="total-contacts">0</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">月均新增</div>
      <div class="stat-value" id="monthly-avg">0</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">最高月份</div>
      <div class="stat-value" id="peak-month">-</div>
      <div class="stat-trend" id="peak-count">0人</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">最近增长</div>
      <div class="stat-value" id="last-month">0</div>
      <div class="stat-trend" id="growth-trend">-</div>
    </div>
  </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  // 示例数据 - 实际使用时可以替换为您的真实数据
  const months = ["2023-01", "2023-02", "2023-03", "2023-04", "2023-05", 
                 "2023-06", "2023-07", "2023-08", "2023-09", "2023-10", 
                 "2023-11", "2023-12"];
  const counts = [45, 52, 48, 60, 65, 72, 80, 75, 68, 82, 90, 85];
  
  // 计算统计数据
  const total = counts.reduce((a, b) => a + b, 0);
  const avg = Math.round(total / counts.length);
  const peakValue = Math.max(...counts);
  const peakIndex = counts.indexOf(peakValue);
  const lastMonth = counts[counts.length - 1];
  const prevMonth = counts[counts.length - 2];
  const growth = lastMonth - prevMonth;
  const growthPercent = prevMonth ? Math.round((growth / prevMonth) * 100) : 0;
  
  // 更新统计信息
  document.getElementById('total-contacts').textContent = total;
  document.getElementById('monthly-avg').textContent = avg;
  document.getElementById('peak-month').textContent = months[peakIndex];
  document.getElementById('peak-count').textContent = peakValue + '人';
  document.getElementById('last-month').textContent = lastMonth;
  
  const trendElement = document.getElementById('growth-trend');
  if (growth > 0) {
    trendElement.textContent = `↑ ${growth}人 (${growthPercent}%)`;
    trendElement.className = 'stat-trend trend-up';
  } else if (growth < 0) {
    trendElement.textContent = `↓ ${Math.abs(growth)}人 (${Math.abs(growthPercent)}%)`;
    trendElement.className = 'stat-trend trend-down';
  } else {
    trendElement.textContent = '→ 持平';
  }
  
  // 初始化图表
  const chart = echarts.init(document.getElementById('chart'));
  
  // 高级配置项
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        return `
          <div style="font-weight:bold;margin-bottom:5px">${params[0].axisValue}</div>
          <div>新增联系人: <span style="color:#5470C6;font-weight:bold">${params[0].data}</span>人</div>
          <div>累计: <span style="color:#4E79A7">${counts.slice(0, params[0].dataIndex + 1).reduce((a, b) => a + b, 0)}</span>人</div>
        `;
      },
      backgroundColor: 'rgba(255,255,255,0.95)',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      textStyle: {
        color: '#2c3e50'
      },
      extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.12);border-radius: 6px;padding: 12px;'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      },
      axisLabel: {
        color: '#7f8c8d',
        fontSize: 12,
        rotate: 30
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      name: '新增数量 (人)',
      nameTextStyle: {
        color: '#7f8c8d',
        padding: [0, 0, 0, 40]
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ddd'
        }
      },
      axisLabel: {
        color: '#7f8c8d'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#eee'
        }
      }
    },
    series: [{
      name: '新增联系人',
      type: 'line',
      data: counts,
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 3,
        color: '#5470C6'
      },
      itemStyle: {
        color: '#5470C6',
        borderColor: '#fff',
        borderWidth: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(84, 112, 198, 0.3)' },
          { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
        ])
      },
      label: {
        show: true,
        position: 'top',
        formatter: '{c}人',
        color: '#2c3e50',
        fontSize: 12
      },
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ],
        symbolSize: 50,
        label: {
          color: '#fff',
          formatter: function(params) {
            return params.name + '\n' + params.data.value + '人';
          }
        },
        itemStyle: {
          color: '#EE6666'
        }
      },
      markLine: {
        data: [{
          type: 'average',
          name: '平均值'
        }],
        label: {
          color: '#2c3e50',
          formatter: '平均: {c}人'
        },
        lineStyle: {
          color: '#91CC75',
          type: 'dashed'
        }
      }
    }],
    animationDuration: 1500,
    animationEasing: 'elasticOut'
  };

  chart.setOption(option);
  
  // 响应式调整
  window.addEventListener('resize', function() {
    chart.resize();
  });
  /*]]>*/
</script>

</body>
</html>